<template>
    <div>
      <!--条件筛选-->
      <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
      <FilterTable
        ref="table"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :isSelectColumn="false"
        :rowstyles="rowstyles"
        :onSyncTableData="syncPjFun"
        :onRowSelectChange="selectChange"
        columnsRef="jzySeries"
        :onColumnsChange="columns => this.columns = columns"
        :isExportExcel2="true"
        :exportFileName="'投诉单处理.xlsx'"
      >
      </FilterTable>
      <Drawer
        :title="dialogTitle"
        :visible.sync="showAddNew"
        :width="1500"
        :closable=true
        destroyOnClose
        :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
      >
        <complaindetil  :type="handleType" :rowData="formData"  @close="dialogClose" />
      </Drawer>
    </div>
</template>

<script>
  import complaindetil from './complaindetil'
  import { dictionary } from '@/utils/dictMixin';
  import { region } from '@/api/cms-common/region';
  import {getcomplainlist,delecte} from '@/api/customerService/complaint/complaintbill/index.js';
  import { getRonoById,getCarByVin } from '@/api/customerService/complaint/complaintbill/index.js';
  import {
    complaintOrigin,
    cpSubtype,
    isFeedback,
    SySubtype,
    complaintSerious,
    complaintType,
    sjtype,
    status,
    jaStatus,
    completeTimely,
    xsSubtype, dzSubtype, fwSubtype, pjSubtype
  } from '../complaintbill/complaint';
  export default {
    mixins: [dictionary,region],
    name: 'index',
    components: {
      complaindetil
    },
    data() {
      this.saveData=null;
      return {
        dialogTitle:'',
        rowstyles:[],
        showAddNew:false,//显示弹出框
        handleType:'',
        conf:{ add: '新增', edit: '编辑', show: '明细' },
        formData:{},
        columns: this.createTableColumns(),
        fetchApi:getcomplainlist,
        fetchParams: {menu:'dealwith'},
        rowSelectData: [],
        topFilterList: this.createTopFilterList(),
      };
    },
    methods:{
      syncPjFun(details, isOverdue){
        if (!details.length) return;
        details.forEach(x => {
          if (x.completeTimely === 'N' && x.status !== 'B') {
            this.rowstyles.push({ row: x, styles: { background: '#FF0000' } });
          }
          if (x.isPrescription === 'Y') {
            this.rowstyles.push({ row: x, styles: { background: '#e9ee07' } });
          }
        });
      },
      async dialogedit(row,type){
        this.handleType = type;
        this.formData={}
        if(row.ronoId){
          await getRonoById({ ronoId: row.ronoId }).then(res => {
            if (res.resultCode === 200) {
              this.formData = Object.assign({flag:true}, row, res.data.records[0]);
            } else {
              this.$notify.error({ title: '提示信息', message: res.errMsg || '服务器运行失败,请与管理员联系!' });
            }
          });
        }
        if (row.vin){
          await getCarByVin({ vin: row.vin }).then(res => {
            if (res.resultCode === 200) {
              if (this.formData.flag){
                this.formData = Object.assign({}, this.formData, res.data.records[0]);
              }else{
                this.formData = Object.assign({}, row, res.data.records[0]);
              }
            } else {
              this.$notify.error({ title: '提示信息', message: res.errMsg || '服务器运行失败,请与管理员联系!' });
            }
          });
        }
        if (!row.vin && !row.ronoId){
          this.formData = row
        }
        this.showHandler();
      },
      showHandler() {
        this.dialogTitle = `投诉单${this.conf[this.handleType]}`;
        this.showAddNew = true;
      },
      dialogClose(){
        this.showAddNew = false
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      },
      selectChange(val) {
        console.log('val', val);
        this.rowSelectData = val;
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      changeHandle(val) {
        this.fetchParams = Object.assign({menu:'dealwith'}, val);
      },
      createTopFilterList(){
        return[
          {
            type: 'INPUT',
            label: '投诉单号',
            fieldName: 'complaintNo'
          },
          {
            type: 'INPUT',
            label: '投诉人姓名',
            fieldName: 'complaintName'
          },
          {
            type: 'INPUT',
            label: '投诉人手机',
            fieldName: 'complaintPhone'
          },
          {
            type: 'SELECT',
            label: '投诉类型',
            fieldName: 'complaintType',
            change:this.changeComplaintType,
            placeholder: '请选择...',
            itemList: complaintType
          },
          {
            type: 'SELECT',
            label: '投诉子类',
            fieldName: 'complaintSubtype',
            placeholder: '请选择...',
            itemList: []
          },
          {
            type: 'SELECT',
            label: '投诉等级',
            fieldName: 'complaintSerious',
            placeholder: '请选择...',
            itemList:complaintSerious,
          },
          {
            type: 'INPUT',
            label: 'VIN',
            fieldName: 'vin'
          },
          // {
          //   type: 'SELECT',
          //   label: '数据来源',
          //   fieldName: 'type',
          //   placeholder: '请选择...',
          //   itemList:sjtype,
          // },
          // {
          //   type: 'SELECT',
          //   label: '投诉来源',
          //   fieldName: 'complaintOrigin',
          //   placeholder: '请选择...',
          //   itemList:complaintOrigin,
          // },
          {
            type: 'SELECT',
            label: '处理状态',
            fieldName: 'status',
            placeholder: '请选择...',
            itemList:status,
          },
          {
            type: 'SELECT',
            label: '结案状态',
            fieldName: 'jastatus',
            placeholder: '请选择...',
            itemList:jaStatus,
          },
        ]
      },
      changeComplaintType(type){
        this.topFilterList.forEach(item=>{
          if (type==='X'&& item.fieldName=='complaintSubtype'){//销售的子类
            item.initialValue=''
            item.itemList=xsSubtype
          }else if (type==='D'&& item.fieldName=='complaintSubtype'){ // 电桩的子类
            item.initialValue=''
            item.itemList=dzSubtype
          }else if (type==='F'&& item.fieldName=='complaintSubtype'){ //服务的子类
            item.initialValue=''
            item.itemList=fwSubtype
          }else if (type==='P'&& item.fieldName=='complaintSubtype'){ //配件的子类
            item.initialValue=''
            item.itemList=pjSubtype
          }else if(type==='C'&& item.fieldName=='complaintSubtype'){ //产品
            item.initialValue=''
            item.itemList=cpSubtype
          }
        })
      },
      createTableColumns(){
        return[
          {
            title: '操作',
            dataIndex: 'column-action',
            width: 60,
            fixed: 'left',
            render: (props, h) => {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.dialogedit(props.row,'show')}>
                    编辑
                  </el-button>
                </div>
              );
            }
          },
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            fixed: 'left',
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '投诉单编号',
            fixed: 'left',
            dataIndex: 'complaintNo',
            sorter: true,
          },
          {
            title: '投诉类型',
            dataIndex: 'complaintType',
            sorter: true,
            dictItems: complaintType
          },
          {
            title: '投诉子类',
            dataIndex: 'complaintSubtype',
            sorter: true,
            dictItems: SySubtype
          },
          {
            title: '数据来源',
            dataIndex: 'type',
            sorter: true,
            dictItems: sjtype
          },
          {
            title: '投诉来源',
            dataIndex: 'complaintOrigin',
            sorter: true,
            dictItems: complaintOrigin
          },
          {
            title: '处理人',
            dataIndex: 'handleBy',
            sorter: true,
          },
          {
            title: '处理状态',
            dataIndex: 'status',
            sorter: true,
            dictItems: status
          },
          {
            title: '处理完成时间',
            dataIndex: 'created_at',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '结案状态',
            dataIndex: 'jaStatus',
            sorter: true,
            dictItems: jaStatus
          },
          {
            title: '结案时间',
            dataIndex: 'completeTime',
            dateFormat: 'yyyy-MM-dd HH:mm:ss',
            sorter: true,
          },
          {
            title: '是否回访',
            dataIndex: 'isFeedback',
            sorter: true,
            dictItems: isFeedback
          },
          {
            title: '是否及时处理',
            dataIndex: 'completeTimely',
            sorter: true,
            hidden:true,
            dictItems: completeTimely
          },
          {
            title: '被投诉部门',
            dataIndex: 'department',
            sorter: true,
          },
          {
            title: '车牌号',
            dataIndex: 'license',
            sorter: true,
          },
          {
            title: '车主姓名',
            dataIndex: 'ownerName',
            sorter: true,
          },
          {
            title: '投诉人姓名',
            dataIndex: 'complaintName',
            sorter: true,
          },
          {
            title: '投诉人电话',
            dataIndex: 'complaintPhone',
            sorter: true,
          },
          {
            title: '投诉摘要',
            dataIndex: 'complaintSummary',
            sorter: true,
          },
          {
            title: '投诉原因',
            dataIndex: 'complaintReason',
            sorter: true,
          },
          {
            title: '解决方案',
            dataIndex: 'resolvent',
            sorter: true,
          },
        ]
      },
      //  删除(把单据状态改成作废,启用标志改成否)
      delete(row){
        this.$confirm('你确定要删除嘛！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.info(row)
          delecte(row.id).then(res=>{
            if (res.resultCode === 200) {
              this.$notify.success({title: '提示信息',message:'操作成功!'});
              // 重新加载
              this.dialogClose();
            }else {
              this.$notify.error({title: '提示信息',message:res.errMsg||'操作失败!'});
              this.dialogClose();
            }
          })
        })
      },
    }
  };
</script>

<style scoped>

</style>
